<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <!--如果要使用组件，直接，把组件的名称，以HTML 标签的形式，引入到页面中去-->
    <!--myComl 中的有大写，在标签中不能使用大写   用 -  来分割-->
    <my-coml></my-coml>
</div>
<script>
    //第一种写法
//
//    //1.1 使用Vue.extend 来创建全局的vue组件模板对象
//    var coml  = Vue.extend({
//        //通过template属性，指定了组件要展示的Html结构
////        template  渲染
//        template:'<h3>这是使用 vue.extend 创建的组件</h3>'
//    });
//    //1.2 使用Vue.component（'组件的名称'，创建出来的组件模板对象）
//    Vue.component('myComl',coml);

    //第二中写法
    Vue.component('myComl',Vue.extend({
        template:'<h3>这是使用 vue.extend 创建的组件</h3>'
    }));



    var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>